<template>
    <div class="commentContain">
        <h3>发表评论</h3>
        <textarea v-model="comment_input"></textarea>
        <mt-button type="primary" size="large" @click="sendComment">发表评论</mt-button>
        <div class="commentContext">
            <ul>
                <li v-for="item in commentList" :key="item.id"  >
                    <div class="comment_title">
                        <div class="faburen"> 发布人:{{item.name}}</div>
                        <div class="fabushijian">时间:{{item.time}}</div>
                    </div>
                    <div class="comment_context">
                        {{item.context}}
                    </div>
                </li>
            </ul>
        </div>
        <mt-button v-show="loardMoreShow==true" type="danger" plain size="large" @click="loardMore">加载更多</mt-button>
        <div id="dengdai" v-show="loardMoreShow!=true">
            <mt-spinner color="rgb(38, 162, 255)" :type="3" ></mt-spinner>
        </div>
        

    </div>
</template>


<script>
import {Toast} from 'mint-ui';

export default {
    data:()=>{
        return {
            commentCount:0,
            pageCount:5,
            commentList:[],
            loardMoreShow:true,
            comment_input:"",
        };
    },
    /**
     * commen= {
     *      context,
     *      name,
     *      time
     * }
     * 
     * commentUrl : 评论url地址get: xxx/id 的方式发送，并且 发送start--开始条  end -- 结束条
     *               返回格式为 [{commen},{commen},{commen}]
     * 
     * itemId:"评论对应的id"
     * 
     * saveUrl:保存评论的url 地址 post: 发送数据id，context,并且返回对应生成的commen
     */
    props:["commentUrl","itemId","saveUrl"],
    created() {
        //this.loardCommentNextPage();
    },
    methods:{
        statrtloard:function(){
             this.loardCommentNextPage();
        },
        loardCommentNextPage:function(){
            
            let params = {
                start:this.commentCount,
                end:this.commentCount + this.pageCount
            }

            this.loardMoreShow = false;
             this.$http.get(this.commentUrl+`/${this.itemId}`,{params:params})
             .then(res=>{
                 this.loardMoreShow = true;
                if(!res.ok){
                    Toast("数据请求失败");
                    return
                }
                let data = res.body.data;
                this.commentList = this.commentList.concat(data);
                this.commentCount = params.end;
             });

        } , 
        loardMore:function(){
            this.loardCommentNextPage()
        },
        sendComment:function(){
            let context = this.comment_input;
            if(context == null || context == ""){
                Toast("请填写对应的评论数据");
                return 
            }

            let params = {
                id:this.itemId,
                context:this.comment_input
            }

            this.$http.post(this.saveUrl,params).then(res=>{
                if(!res.ok){
                Toast("数据请求失败");
                    return 
                }
                let data = res.body.data;
                this.commentList.unshift(data)
                this.commentCount = this.commentCount +1
            });
        },

    }


    
    
}
</script>



<style scoped>
.commentContain textarea{
    width: 100%;
    height: 100px;
}

.commentContain h3{
    font-size: 18px;
    margin-bottom: 15px;
}

.commentContain ul{
    list-style: none;
    padding: 0px;
}

.commentContain li{
    margin-bottom: 15px;
}

.commentContain .comment_title{
    height: 19px;
    color: aliceblue;
    background-color: #888;
    line-height: 19px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 8px;
}

.commentContain .faburen{
    float: left;
}

.commentContain .fabushijian{
    float: right;
}

.commentContain .comment_title div{
    font-size: 11px;
    

}

#dengdai{
    width: 28px;
    margin: auto;
}


</style>
